import React, { useState, useEffect } from 'react';
import Taro from '@tarojs/taro';
import {Navigator, View} from '@tarojs/components'
import {AtIcon} from 'taro-ui'
import './search-header-bg.scss'

interface SearchBarType {
  iconColor?: string
  searchIconColor?: string
  headTop?: string
  searchTextColor?: string
  searchBgColor?: string
  searchText?: string
}

const SearchHeaderBg: React.FC<SearchBarType> = (props) => {
  const [showBack, setShowBack] = useState(true)
  useEffect(() => {
    const pages = Taro.getCurrentPages();
    if (pages.length <= 1) {
      setShowBack(false)
    }
  }, [])


  return (
    <View className='search-header-bg' style={`top: ${props.headTop || 0}px;`}>
      {showBack &&
      <View className='search-header-bg-back' onClick={() => Taro.navigateBack()}><AtIcon value='chevron-left' size='20' customStyle='font-size: 20px;'
        color={props.iconColor}
      /></View>}
      {!showBack &&
      <View className='search-header-bg-home' onClick={() => Taro.switchTab({url: '/pages/index/index'})}><AtIcon
        prefixClass='xxhz' value='shouye' size='20' customStyle='font-size: 20px;' color={props.iconColor}
      /></View>}
      <View className='search-header-bg-search-bar' style={`background-color: ${props.searchBgColor}`}><Navigator
        className='search' url='/common/search/search' hoverClass='none'
      >
        <View className='icon'>
          <AtIcon value='search' size='16' customStyle='font-size: 16px;' color={props.searchIconColor} />
        </View>
        <View style={`color: ${props.searchTextColor}`}>{props.searchText || '搜索关键词'}</View>
      </Navigator></View>
    </View>
  )
}

export default SearchHeaderBg
